<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title>Licores Nuvo</title>
        <link href="../../css/style.css" type="text/css" rel="stylesheet"/>
    </h:head>
    <h:body>
            <h:form  prependId="false" > 

            <p:growl id="growl"  />
            <table  style="width:100%" >
                <tr>
                    <td style="width:70%">
                        <center>
                            <p:panelGrid style="width:100%" id="panel1"  >  
                                <f:facet name="header">
                                    <p:row>  
                                        <p:column >Datos De Usuario</p:column> 
                                    </p:row>                                
                                </f:facet>
                                <p:row>
                                    <p:column >
                                        <table style="width: 100%"   >
                                            <tr>
                                                <td>Identificacion*</td>
                                                <td><p:inputText required="true" value="#{usuarioBean.usu}"/></td>
                                                <td>usuario*</td>
                                                <td><p:inputText required="true" value="#{controlUsuario.usu.usuario}"/></td>                                            

                                            </tr>
                                            <tr>
                                                <td>Nombre*</td>
                                                <td><p:inputText required="true" value="#{controlUsuario.usu.nombre}"/></td>
                                                <td>Contraseña*</td>
                                                <td><p:password required="true" value="#{controlUsuario.usu.clave}"/></td>                                            
                                            </tr>
                                            <tr>
                                                <td>Apellido*</td>
                                                <td><p:inputText required="true" value="#{controlUsuario.usu.apellido}"/></td>                                            
                                                <td>Tipo</td>
                                                <td><p:selectOneMenu required="true" value="#{controlUsuario.usu.tipo}" style="width:100%"  >                                                         
                                                        <f:selectItem itemLabel="Seleccione Rango"  />
                                                        <f:selectItem itemLabel="Administrativo" itemValue="0" />
                                                        <f:selectItem itemLabel="Empleado" itemValue="1" />
                                                    </p:selectOneMenu> </td>                                            

                                            </tr>

                                        </table>
                                    </p:column>
                                </p:row>
                                <p:row>
                                    <p:column>
                                        <center><p:commandButton  id="btn" value="Guardar" image="ui-icon ui-icon-disk"  action="#{controlUsuario.registrar()}" update="panel1 growl"/>
                                            <p:commandButton value="Cancelar" type="reset" action="#{controlUsuario.limpiar()}" image="ui-icon ui-icon-close" global="false"  style="margin-left:5px"/> </center>
                                    </p:column>
                                </p:row>
                            </p:panelGrid>                 
                        </center> 
                    </td>
                </tr>
            </table>

        </h:form>  
        <h:form id="form">            
            <p:dataTable  id="tabla" var="Usuario"  value="#{controlUsuario.usuarios}"
                          paginator="true" rows="5" 
                          rowKey="#{Usuario}"  
                          selection="#{controlUsuario.usuariosselecinado}" 
                          selectionMode="single">  

                <p:ajax event="rowSelect" update="@form" oncomplete="Modif.show()"/>  


                <p:column headerText="Identificacion"  >  
                    <h:outputText value="#{Usuario.idusuario}"/>  
                </p:column>  

                <p:column headerText="Nombre" >  
                    <h:outputText value="#{Usuario.nombre} #{Usuario.apellido}" />  
                </p:column> 
                <p:column headerText="Usuario" >  
                    <center><h:outputText value="#{Usuario.usuario}" /></center>
                </p:column>

                <p:column headerText="Tipo" >  
                    <h:outputText value="#{Usuario.rango}" />  
                </p:column>


            </p:dataTable>
            <p:dialog id="modif" header="Modificar" widgetVar="Modif" resizable="false"  
                      showEffect="explode" hideEffect="explode" modal="true" width="500" >  
                <table style="width:100%"  >
                    <tr>
                        <td colspan="3"><center><h:outputText value="#{controlUsuario.usuariosselecinado.idusuario}" /></center></td>
                    </tr>
                    <tr>
                        <td colspan="3"><center><p:graphicImage   value="../../Imagenes/key.png" style="width:30%"/></center></td>
                    </tr>
                    <tr>
                        <td style="width:30%"><h:outputText value="Nombre :"/></td>
                        <td colspan="2"><center><p:inplace editor="true"> <p:inputText  value="#{controlUsuario.usuariosselecinado.nombre}"  label="text"/></p:inplace></center></td>
                    </tr>
                    <tr>
                        <td><h:outputText value="Apellido :" /></td>
                        <td colspan="2"><center><p:inplace editor="true"> <p:inputText  value="#{controlUsuario.usuariosselecinado.apellido}"  label="text"/></p:inplace></center></td>
                    </tr>
                    <tr>
                        <td><h:outputText value="Direccion :" /></td>
                        <td colspan="2"><center><p:inplace editor="true"> <p:inputText  value="#{controlUsuario.usuariosselecinado.direccion}"  label="text"/></p:inplace></center></td>
                    </tr>
                    <tr>
                        <td><h:outputText value="Telefono :" /></td>
                        <td colspan="2"><center><p:inplace editor="true"> <p:inputText  value="#{controlUsuario.usuariosselecinado.telefono}"  label="text"/></p:inplace></center></td>
                    </tr>
                    <tr>
                        <td><h:outputText value="Usaurio :" /></td>
                        <td style="width: 5%"><p:message for="surname" id="msgSurname" display="icon"/></td>
                        <td><center><p:inplace editor="true">  
                                    <p:inputText id="surname" value="#{controlUsuario.usuariosselecinado.usuario}" label="Surname" required="true">  
                                        <f:validateLength minimum="4"  />  
                                        <p:ajax update="msgSurname" event="keyup" />  
                                    </p:inputText>               
                                </p:inplace>
                            </center></td>

                    </tr>
                    <tr>
                        <td><h:outputText value="Tipo de Usuario :"/></td>
                        <td colspan="2"><center><p:inplace id="selectableInplace" label="#{controlUsuario.usuariosselecinado.rango}" effectSpeed="fast" event="dblclick">  
                                    <p:selectOneMenu required="true" value="#{controlUsuario.usuariosselecinado.rango}" style="width:100%"  >                                                         
                                        <f:selectItem itemLabel="Seleccione Rango"  />
                                        <f:selectItem itemLabel="Mesero" itemValue="Mesero" />
                                        <f:selectItem itemLabel="Mesero Administrador" itemValue="MeseroAdministrador" />
                                    </p:selectOneMenu> 
                                </p:inplace></center></td>
                    </tr>
                    <tr>
                        <td colspan="2" ><p:commandButton value="Guardar  Cambios"  onclick="confir.show()"      /></td>                        
                        <td><p:commandButton   value="Salir" image="ui-icon ui-icon-exit" onclick="Modif.hide()"  /></td>
                    </tr>
                    <tr><td><p:messages id="msgs"  /></td></tr>
                </table>               
            </p:dialog>
            <p:dialog modal="true" id="confirmar" widgetVar="confir" header="Confirmar..."   
                      draggable="false" closable="false" resizable="false"> 
                Desa Guardar Los Cambios de #{controlUsuario.usuariosselecinado.nombre}
                <f:facet name="footer">
                    <div style="float: right;">                                       
                        <p:commandButton   value="Si"  image="ui-icon ui-icon-disk"  action="#{controlUsuario.modificarUsaurio()}" update="tabla msgs" oncomplete="confir.hide()" />
                        <p:commandButton   value="Cancelar" image="ui-icon ui-icon-close"  onclick="confir.hide()"  />                        
                        <p:graphicImage value="../../img/cargando.gif" />
                    </div>
                </f:facet>
            </p:dialog>
            <p:ajaxStatus onstart="statusDialog.show();" onsuccess="statusDialog.hide();"/>  
            <p:dialog modal="true" widgetVar="statusDialog" header="Cargando..."   
                      draggable="false" closable="false" resizable="false">  
                <p:graphicImage value="../../img/cargando.gif" />  
            </p:dialog>
        </h:form>       

    </h:body>
</html>
